<template>
    <div class="">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-lx-copy"></i> 消息管理</el-breadcrumb-item>
                 <el-breadcrumb-item>个人消息</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <el-tabs v-model="message">
                 
                 <el-tab-pane :label="`已发送(${mymessage.length})`" name="mymessage">
                    <template v-if="message === 'mymessage'">
                        <el-table :data="mymessage" :show-header="false" style="width: 100%" @row-click="openSelfMessage">
                           <el-table-column type="index" width="50">

                           </el-table-column>

                        <el-table-column>
                            <template slot-scope="scope">
                                <span class="message-title">{{scope.row.title}}</span>
                            </template>
                        </el-table-column>

                        <el-table-column prop="createTime" width="180">

                        </el-table-column>
                        <el-table-column width="120">
                            <template slot-scope="scope">
                                <el-button type="danger" @click.stop="delSelfMsg(scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                        </el-table>
                        <div class="handle-row">
                            <el-button type="danger">删除全部</el-button>
                        </div>
                    </template>
                </el-tab-pane>


                <el-tab-pane :label="`未读消息(${unread.length})`" name="first">
                    <el-table :data="unread" :show-header="false" style="width: 100%" @row-click="openMessage">
                        <el-table-column type="index" width="50"></el-table-column>
                        <el-table-column>
                            <template slot-scope="scope">
                                <span class="message-title">{{scope.row.title}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="createTime" width="180"></el-table-column>
                        <el-table-column width="120">
                            <template slot-scope="scope">
                                <el-button size="small" @click.stop="handleRead(scope.row)">标为已读</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="handle-row">
                        <el-button type="primary">全部标为已读</el-button>
                    </div>
                </el-tab-pane>


                <el-tab-pane :label="`已读消息(${read.length})`" name="second">
                    <template v-if="message === 'second'">
                        <el-table :data="read" :show-header="false" style="width: 100%" @row-click="openMessage">
                            <el-table-column type="index" width="50"></el-table-column>
                            <el-table-column>
                                <template slot-scope="scope">
                                    <span class="message-title">{{scope.row.title}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="createTime" width="150"></el-table-column>
                            <el-table-column width="120">
                                <template slot-scope="scope">
                                    <el-button type="danger" @click.stop="handleDel(scope.$index,scope.row)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <div class="handle-row">
                            <el-button type="danger">删除全部</el-button>
                        </div>
                    </template>
                </el-tab-pane>


                 <el-tab-pane :label="`个人假条(${myLeaves.length})`" name="myLeave">
                    <template v-if="message === 'myLeave'">
                        <el-table :data="myLeaves" :show-header="false" style="width: 100%" @row-click="openLeave">
                            <el-table-column>
                                <template slot-scope="scope">
                                    <span class="message-title">{{scope.row.tid+'---'+scope.row.name}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="createTime" width="150"></el-table-column>
                            <el-table-column width="120">
                                <template slot-scope="scope">
                                    <el-button type="danger" @click.stop="delSelfLeave(scope.row)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <div class="handle-row">
                            <el-button type="danger">删除全部</el-button>
                        </div>
                    </template>
                </el-tab-pane>


                 <el-tab-pane :label="`假条审批(${judgeLeaves.length})`" name="judge" v-if="selfPosition.level!='05'">
                    <template v-if="message === 'judge' ">
                        <el-table :data="judgeLeaves" :show-header="false" style="width: 100%" @row-click="openLeave" >
                            <el-table-column>
                                <template slot-scope="scope">
                                    <span class="message-title">{{scope.row.tid+'---'+scope.row.name}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="createTime" width="150"></el-table-column>
                            <el-table-column width="120">
                                <template slot-scope="scope">
                                    <el-button type="danger" @click.stop="delJudgefLeave(scope.row)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <div class="handle-row">
                            <el-button type="danger">删除全部</el-button>
                        </div>
                    </template>
                </el-tab-pane>

            </el-tabs>
            
            <!-- 信息面板 -->
            <el-dialog title="信息" :visible.sync="dialogFormVisible" width="700px">
                <el-form :model="messageForm">
                    <el-form-item label="发送人编号" :label-width="formLabelWidth">
                        <el-input v-model="messageForm.tid" autocomplete="off" style="width:250px" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="发送人" :label-width="formLabelWidth">
                        <el-input v-model="messageForm.name" autocomplete="off" style="width:250px" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="信息类型" :label-width="formLabelWidth">
                    <el-select v-model="messageForm.type" placeholder="请选择活动区域" disabled>
                        <el-option label="普通信息" value="00"></el-option>
                        <el-option label="通知信息" value="01"></el-option>
                    </el-select>
                    </el-form-item>
                     <el-form-item label="发送时间" :label-width="formLabelWidth">
                        <el-input v-model="messageForm.createTime" autocomplete="off" style="width:250px" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="标题" :label-width="formLabelWidth">
                        <el-input v-model="messageForm.title" autocomplete="off" style="width:250px" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="内容" :label-width="formLabelWidth">
                         <mavon-editor :value="messageForm.content" ref="md" :toolbarsFlag="false" :subfield="false" :defaultOpen="'preview'" :boxShadow='false' style="width:500px" :editable="false" />
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
                </div>
            </el-dialog>

            <!-- 假条 -->
            <el-dialog title="假条" :visible.sync="dialogFormVisible1" width="700px">
                <el-form :model="leaveForm">
                    <el-form-item label="请假人编号" :label-width="formLabelWidth">
                        <el-input v-model="leaveForm.tid" autocomplete="off" style="width:250px" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="请假人" :label-width="formLabelWidth">
                        <el-input v-model="leaveForm.name" autocomplete="off" style="width:250px" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="审批人" :label-width="formLabelWidth">
                        <el-input v-model="leaveForm.leader" autocomplete="off" style="width:250px" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="请假时间" :label-width="formLabelWidth">
                         <el-col :span="11">
                            <el-date-picker v-model="leaveForm.startTime" format="yyyy-MM-dd" type="date" placeholder="选择日期" disabled>
                            </el-date-picker>
                        </el-col>
                        <el-col class="line" :span="2">-</el-col>
                        <el-col :span="11">
                            <el-date-picker v-model="leaveForm.endTime" format="yyyy-MM-dd" type="date" placeholder="选择日期" disabled>
                            </el-date-picker>
                        </el-col>
                    </el-form-item>
                     
                    <el-form-item label="理由" :label-width="formLabelWidth">
                        <el-input type="textarea" rows="5" v-model="leaveForm.description" disabled></el-input>
                    </el-form-item>
                   
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible1 = false">取 消</el-button>
                    <el-button type="primary" @click="dialogFormVisible1 = false">确 定</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
    import 'mavon-editor/dist/css/index.css'
    import { mavonEditor } from 'mavon-editor'
    export default {
        name: 'tabs',
        inject: ['reload'],
        data() {
            return {
                message: 'mymessage',
                showHeader: false,
                my:{},
                mymessage:[],
                msgEmps:[],
                selfPosition:{
                    level: '05'
                },
                unread: [],
                read: [],
                myLeaves:[],
                judgeLeaves:[],
                dialogFormVisible:false,
                dialogFormVisible1:false,
                messageForm:{},
                leaveForm:{},
                formLabelWidth:"100px"
            }
        },
          components: {
            mavonEditor
    },
        created: function(){
            this.getSelfEmployee();
            this.getSelfPosition();
            this.init();

        },
        methods: {
            //初始化消息
            async init(){
                var d = await this.$http.get("/msgEmpByTid/"+this.my.tellerId);
                if (d.code==200) {
                    this.msgEmps=d.data;
                    this.setReadUnRead(this.msgEmps)
                }
                var a = await this.$http.get("/selfMsg/"+this.my.tellerId)
                if (a.code==200) {
                    this.mymessage=a.data
                }
            
            },
            setReadUnRead(msgEmps){
                for(let i=0;i<msgEmps.length;i++){
                    if (msgEmps[i].status=='00') {
                        this.unread.push(msgEmps[i])
                    }else{
                        this.read.push(msgEmps[i])
                    }
                }
            },


            openSelfMessage(row, column,event){
                this.messageForm=row
                this.dialogFormVisible=true;
            },
            async openMessage(row, column,event){
                var d = await this.$http.get("/msg/"+row.mid);
                this.messageForm = d.data
                this.dialogFormVisible=true;
                if(row.status=='00'){
                    this.handleRead(row)
                }
            },
            openLeave(row,column,event){
                this.leaveForm=row
                this.dialogFormVisible1=true;
            },


            getSelfPosition(){
                
               let d = JSON.parse(window.sessionStorage.getItem("position"))
                if(d!=null){
                    this.selfPosition=d
                }
            },

            getSelfEmployee(){
                this.my=JSON.parse(window.sessionStorage.getItem("employee"))
                this.getMyLeaves(this.my)
                this.getJudgeLeaves(this.my)
            },
            
            async getMyLeaves(employee){
                var query={
                    tid:employee.tellerId,
                    selfEnable:'01'
                }
                var d = await this.$http.post("/leaveMap",query)
                if(d.code==200){
                    if(d.data!=null){
                        this.myLeaves=d.data
                    }else{
                        this.myLeaves=[]
                    }
                }
            },

            async getJudgeLeaves(employee){
                var query={
                    leader:employee.tellerId,
                    enable:'01'
                }
                var d = await this.$http.post("/leaveMap",query)
                if(d.code==200){
                    if(d.data!=null){
                        this.judgeLeaves=d.data
                    }else{
                        this.judgeLeaves=[]
                    }
                }
            },


            async handleRead(item) {
                //后台更新状态
                var d =  await this.$http.post("/msgEmpReaded",item);
                if (d.code==200) {
                    // const item = this.unread.splice(index, 1);
                    // this.read = item.concat(this.read);
                    this.reload();
                }
            },
            async handleDel(index,item) {
                    var d =  await this.$http.post("/delMsgEmp",item);
                    if (d.code==200) {
                        const item = this.read.splice(index, 1);
                        this.$message.success(d.message)
                        // this.reload();
                    }
 
            },
             delSelfMsg(item){

                 this.$confirm('此操作将删除该信息, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                    }).then(async() => {
                         var d =  await this.$http.delete("/selfMsg/"+item.id);
                    if (d.code==200) {
                         this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                        this.reload();
                    }
                   
                    }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });          
                    });
            },
            delSelfLeave(item){
                this.$confirm('此操作将删除该假条, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                        }).then(async() => {
                            var d =  await this.$http.delete("/selfLeave/"+item.id);
                        if (d.code==200) {
                            this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                            this.reload();
                        }
                    
                        }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });          
                        });
            },
             delJudgefLeave(item){
                this.$confirm('此操作将删除该审批假条, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                        }).then(async() => {
                            var d =  await this.$http.delete("/judgeLeave/"+item.id);
                        if (d.code==200) {
                            this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                            this.reload();
                        }
                    
                        }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });          
                        });
            }
           
        },
        computed: {
            unreadNum(){
                return this.unread.length;
            }
        }
    }

</script>

<style>
.message-title{
    cursor: pointer;
}
.handle-row{
    margin-top: 30px;
}
</style>

